<template>
  <div
    class="pui-window"
    :style="{
      width: Number(changePosition.x) + Number(defaultWidth) + 'px',
      height: Number(changePosition.y) + Number(defaultHeight) + 'px',
      top: Number(movePosition.y) + 'px',
      left: Number(movePosition.x) + 'px',
      backgroundColor: backgroundColor,
    }"
    :defaultWidth:="defaultWidth"
    :defaultHeight:="defaultHeight"
    :title="title"
    :backgroundColor="backgroundColor"
    @node-click="handleNodeClick"
    @contextmenu.prevent.stop="rightClick($event)"
    id="editor-box"
    ref="splitPaneRef"
  >
    <!-- 八个角的鼠标放上的样式 -->
    <div class="left-top-box" @mousedown="handleMouseDown"></div>
    <div Class="left-bottom-box" @mousedown="handleMouseDown"></div>
    <div class="right-bottom-box" @mousedown="handleMouseDown"></div>
    <!-- <div class="top-up-box" @mousedown="handleMouseDown"></div> -->
    <div class="top-bottom-box" @mousedown="handleMouseDown"></div>
    <div class="left-box" @mousedown="handleMouseDown"></div>
    <div class="right-box" @mousedown="handleMouseDown"></div>
    <!-- 窗口标题 -->
    <div id="windowTop" @mousedown="handleMouseDownForMove" ref="windowTop">
      <p id="title">{{ title }}</p>
      <i id="delete" class="pui-icon pui-icon-close normal" @click="handleClick()"></i>
    </div>
    <div id="contextmenu" ref="contextmenu" v-show="menuVisible" class="menu">
      <div class="contextmenu_item" @click="restore()">还原</div>
      <div class="contextmenu_item" @click="item.fn()" v-for="item in rightItemList">{{ item.name }}</div>
    </div>
    <slot></slot>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'puiWindow',
});
</script>

<script setup lang="ts">
import { ref, watch } from 'vue';
import type { Props } from './interface';

const props = withDefaults(defineProps<Props>(), {
  title: 'title',
  defaultWidth: 200,
  defaultHeight: 200,
  backgroundColor: '#fff',
  rightItemList: () => {
    return [];
  },
});

const emits = defineEmits<{
  closeWindow: [];
  changeWindow: [];
}>();

const defaultPosition = ref();
const startPosition = ref();
const contextmenu = ref();
const splitPaneRef = ref();
const movePosition = ref({
  x: 0,
  y: 0,
});
const changePosition = ref({
  x: 0,
  y: 0,
});

const menuVisible = ref(false);

watch(
  () => changePosition,
  (newHeight, oldHeight) => {
    console.log('newHeight');
    emits('changeWindow');
  },
  { deep: true, immediate: true }
);
//按下滑动器
const handleMouseDown = (e: any) => {
  document.addEventListener('mousemove', handleMouseMove);
  document.addEventListener('mouseup', handleMouseUp);
  // const clientRect = splitPaneRef.value.getBoundingClientRect()
  // let editorBox: any = document.getElementById('editor-box')
  // editorBox.style.cursor = 'crosshairt'
  defaultPosition.value = {
    x: e.clientX,
    y: e.clientY,
  };
};
const handleMouseDownForMove = (e: any) => {
  document.addEventListener('mousemove', handleMouseMoveForMove);
  document.addEventListener('mouseup', handleMouseUpForMove);
  // e.stopPropagation()
  // const startPosition = getPosition(e)
  startPosition.value = {
    x: e.clientX,
    y: e.clientY,
  };
  console.log(startPosition);
};
const getPosition = (e: any) => {
  if (e instanceof MouseEvent) {
    return [e.pageX, e.pageY];
  }
  const touch = e.touches[0];
  return [touch.pageX, touch.pageY];
};
//按下滑动器后移动鼠标
const handleMouseMove = (e: any) => {
  let x = e.clientX - defaultPosition.value.x;
  let y = e.clientY - defaultPosition.value.y;
  if (x !== 0 && y !== 0) {
    changePosition.value = {
      x,
      y,
    };
  }
};
const handleMouseMoveForMove = (e: any) => {
  let x = e.clientX - startPosition.value.x;
  let y = e.clientY - startPosition.value.y;
  if (x !== 0 && y !== 0) {
    movePosition.value = {
      x,
      y,
    };
  }
};
// 松开滑动器
const handleMouseUp = () => {
  document.removeEventListener('mousemove', handleMouseMove);
};
const handleMouseUpForMove = () => {
  document.removeEventListener('mousemove', handleMouseMoveForMove);
};
const handleClick = () => {
  emits('closeWindow');
};

const handleNodeClick = () => {
  menuVisible.value = false;
};
const rightClick = (event: any) => {
  menuVisible.value = false;
  menuVisible.value = true;
  const { x, y } = event;
  contextmenu.value.style.top = y - splitPaneRef.value.getBoundingClientRect().top + 'px';
  contextmenu.value.style.left = x - splitPaneRef.value.getBoundingClientRect().left + 'px';
  document.addEventListener('click', foo);
};
const foo = () => {
  menuVisible.value = false;
  document.removeEventListener('click', foo); // 关掉监听，
};
const restore = () => {
  changePosition.value = {
    x: 0,
    y: 0,
  };
  movePosition.value = {
    x: 0,
    y: 0,
  };
};
</script>
